.third {
    width: 100%;
    height: 100%;
    position: relative;

    .top {
        // display: inline-block;
        position: absolute;
        width: 100%;
        top: 0;
        animation: img1 1s;
        // transform: translateX(100px);
        opacity: 0;
        animation-fill-mode: forwards;
    }

    .buttom {
        // display: inline-block;
        position: absolute;
        width: 100%;
        bottom: 0;
        animation: img2 1s;
        // transform: translateX(100px);
        opacity: 0;
        animation-fill-mode: forwards;
    }

    .fonts {
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        top: 20%;
        left: 2%;
        animation: fontaaa 1s 0.3s;
        animation-fill-mode: forwards;
    }

    @keyframes fontaaa {
        from {
            width: 0px;
            height: 0px;
            margin-top: 0.5rem;
            margin-left: 0.5rem;
        }

        to {
            width: 1rem;
            height: 1rem;
        }
    }


    .font2 {
        position: absolute;
        z-index: 1;
        top: 40%;
        width: 2.05rem;
        height: 3.62rem;
        left: 2%;
        // transform: rotateY(-100px);
        opacity: 0;
        animation: font2 1s 0.6s;
        animation-fill-mode: forwards;
    }
}

@keyframes img1 {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes img2 {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}





@keyframes font2 {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}